<template>
  <div class="banderbox">
    <div class="conbox">
      <div class="ti">User bander</div>
      <div class="con">
        <div class="contit">
          <div class="location">Location</div>
          <div class="Name">Name</div>
          <div class="Img">Img</div>
          <div class="Path">Path</div>
          <div class="operate">Operate</div>
        </div>
        <div class="imgbox" v-if="showdata.length">
          <div
            class="imgitem contit"
            v-for="(i, index) in showdata"
            :key="i.path"
          >
            <div class="location">{{ index + 1 }}</div>
            <div class="Name">{{ i.name }}</div>
            <div class="Img">
              <img class="imgs" :src="'http://127.0.0.1:3006' + i.img" alt="" />
            </div>
            <div class="Path">{{ i.path ? i.path : "null" }}</div>
            <div class="operate">
              <div class="iconfont icon-bianji" @click="edits(i)"></div>
              <el-popconfirm
                title="Are you sure to delete this?"
                icon-color="red"
                @confirm="confirm(i)"
              >
                <template #reference>
                  <div class="iconfont icon-gengduo ss"></div>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </div>
        <div class="nullbander" v-else>暂无bander</div>
        <div class="add" @click="addbander">
          <div class="iconfont icon-jiahao"></div>
          添加bander
        </div>
      </div>
    </div>
    <el-drawer v-model="drawer2" direction="rtl">
      <template #header>
        <h4 class="edittit">{{ titref }}</h4>
      </template>
      <template #default>
        <el-form
          label-position="right"
          label-width="50"
          :model="currdata"
          :rules="rules"
          ref="forms"
        >
          <el-form-item label="Name" prop="name">
            <div class="out-name">
              <el-input type="text" v-model="currdata.name" />
            </div>
          </el-form-item>
          <el-form-item label="Img" style="margin: 30px 0" prop="img">
            <el-upload
              v-model:file-list="currdata.img"
              list-type="picture-card"
              :auto-upload="false"
              limit="1"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="Path">
            <div><el-input type="text" v-model="currdata.path" /></div>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="editbtn">
          <el-button class="ed-button" @click="addsneddata">yes</el-button>
          <el-button @click="exitdata">no</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import {
  addbandersend,
  editbandersend,
  getbander,
  delbanders,
} from "@/api/index";
import { ElNotification } from "element-plus";
import type { banderdatatypedata, banderdatatype } from "@/api/type";
import type { currentdatatype, addbanderdatatypes } from "./type";
const drawer2 = ref<boolean>(false);
const titref = ref<string>("Edit Data");
const showdata = ref<banderdatatypedata[]>([]);
const currdata = ref<currentdatatype>({
  name: "",
  img: [],
  path: "",
});
const forms = ref<any>();
const validatePass = (_: any, va: any, callback: any) => {
  if (va.length == 0) {
    callback(new Error("name is required"));
  }
  callback();
};
const checkAge = (_: any, va: any, callback: any) => {
  if (va.length == 0) {
    callback(new Error("img is required"));
  }
  callback();
};
const rules = ref<any>({
  name: [{ validator: validatePass, trigger: "blur" }],
  img: [{ validator: checkAge, trigger: "blur" }],
});

onMounted(async () => {
  try {
    await erroerr();
    console.log("111");
  } catch (error) {
    console.log("222");
  }
  getbanderdd();
});
const erroerr = async () => {
  return Promise.reject("err");
};
const getbanderdd = async () => {
  const rudata: banderdatatype = await getbander();
  if (rudata.code == 200) {
    showdata.value = rudata.data.map((e) => {
      const { name, img, path, id } = e;
      return { name, img, path, id };
    });
  }
};
const edits = (e: any) => {
  drawer2.value = true;
  titref.value = "Edit bander";
  const data = JSON.parse(JSON.stringify(e));
  currdata.value = {
    name: data.name,
    img: [{ url: "http://localhost:3006" + data.img }],
    path: data.path,
    id: data.id,
  };
};
const confirm = async (e: any) => {
  const rudata = await delbanders(e.id);
  if (rudata.code == 200) {
    ElNotification({
      type: "success",
      title: "Success",
      message: "delete success",
    });
    getbanderdd();
  }
};
const addbander = () => {
  currdata.value = {
    name: "",
    img: [],
    path: "",
  };
  titref.value = "Add bander";
  drawer2.value = true;
};
const addsneddata = async (): Promise<any> => {
  await forms.value.validate();
  if (titref.value == "Edit bander") {
    return editbanderdataa();
  }
  addbanderdataa();
};
const editbanderdataa = async () => {
  const data = new FormData();
  data.append("name", currdata.value["name"]);
  //@ts-ignore
  data.append("id", currdata.value["id"]);
  //@ts-ignore
  if (currdata.value["img"][0].raw) {
    data.append("img", currdata.value["img"][0].raw);
  }
  data.append("path", currdata.value["path"]);
  const rudata = await editbandersend(data);
  if (rudata.code == 200) {
    getbanderdd();
    ElNotification({
      type: "success",
      title: "edit success",
      message: "edit success",
    });
    drawer2.value = false;
  }
};
const exitdata = (): void => {
  drawer2.value = false;
};
const addbanderdataa = async () => {
  const data = new FormData();
  data.append("name", currdata.value["name"]);
  //@ts-ignore
  data.append("img", currdata.value["img"][0].raw);
  data.append("path", currdata.value["path"]);
  const rudata: addbanderdatatypes = await addbandersend(data);
  if (rudata.code == 200) {
    getbanderdd();
    ElNotification({
      type: "success",
      message: "add success",
      title: "success",
    });
    drawer2.value = false;
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--them-color);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<style scoped lang="scss">
.nullbander {
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.avatar {
  height: 150px;
  width: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.banderbox {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: hidden;
  position: relative;

  .ed-button {
    background-color: var(--them-color);
    // border: none;
    color: #fff;
    font-weight: 700;
    &:hover {
      color: none !important;
    }
  }
  :deep(.el-drawer) {
    background-color: #252931;
    border-radius: 10px 0 0 0px;
  }
  :deep(.el-overlay) {
    position: absolute !important;
  }
  .edittit {
    color: #fff;
  }
  .conbox {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #252931;
    padding: 0 15px;
    border: 1px solid #4c4d4f;

    .ti {
      font-size: 1vw;
      font-weight: 700;
      color: #fff;
      padding: 15px 0px;
    }
    .con {
      width: 100%;
      height: calc(100% - 1vw);
      margin-top: 10px;
      position: relative;
      .add {
        position: absolute;
        bottom: 5vw;
        margin-top: 10px;
        width: 100%;
        height: 5vw;
        border: 1px dashed var(--them-color2);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: var(--them-color2);
        &:hover {
          border: 2px dashed #fff;
          color: #fff;
          cursor: pointer;
        }
      }
      .imgbox {
        height: 26vw;
        overflow: auto;
        &::-webkit-scrollbar {
          display: none;
          // width: 3px;
          // background-color: #7b7b7b;
          // border-radius: 2px;
        }
        // &::-webkit-scrollbar-thumb {
        //   background-color: var(--them-color);
        //   border-radius: 2px;
        // }
        .imgitem {
          height: 22%;
          cursor: pointer;
          border: 1px solid rgba(221, 225, 230, 0.4);
          border-radius: 5px;
          padding: 0 10px;
          margin-bottom: 10px;
          text-align: start;
          font-size: 0.78vw !important;
          font-weight: normal;
          &:hover {
            border: 1px solid var(--them-color);
          }
        }
      }
      .contit {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        padding: 0 10px;
        margin-bottom: 4px;
        .location {
          width: 170px;
        }
        .Name {
          width: 220px;
        }
        .Img {
          flex: 1;
        }
        .Path {
          width: 180px;
        }
        .operate {
          width: 150px;
          display: flex;
          gap: 30px;
          :deep(.el-popover) {
            background-color: var(--them-color2) !important;
          }
          .iconfont {
            cursor: pointer;
            &:hover {
              color: #fff;
              font-weight: 700;
            }
          }
          .ss {
            transform: rotate(90deg);
          }
        }
      }

      .imgs {
        height: 4.5vw;
        width: 60%;
        object-fit: cover;
        border-radius: 5px;
        box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.7);
        transition: all 0.5s;
        cursor: pointer;
      }
      .imgs:hover {
        // box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.7);
        transform: scale(1.02);
      }
    }
  }
}
</style>
